<template>
  <div style="background: #757575;height: 100%">
    <div class="customer-service">
      <P style="font-size: 18px;text-align: center;height: 40px;padding: 5px;line-height: 40px;">{{ to }}</P>
      <div class="customer-service-body" ref="service">
        <div v-for="item in msgList.data">

          <div class="service-msg" v-if="item.username==to&&item.identity=='client'">
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
            <div class="chatinfo"><p>{{ item.msg }}</p></div>
          </div>
          <!--订单信息-->
          <div class="service-msg" v-if="item.username==to&&item.identity=='order'">
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
            <div style="flex: 3;">
              <div class="order-card">
                <p style="color: black;font-size: 16px">顾客在咨询的订单</p>
                <div style="display: flex">
                  <div><img width="35px" :src="item.imgurl"></div>
                  <div style="flex: 2;background: #e1e1e1">
                    <P style="color: black;font-size: 12px;overflow: hidden;height: 20px">{{ item.goodsName }}</P>
                    <P>共计{{ item.quantity }}件商品:{{ item.totalPrice }}元</P>
                  </div>
                </div>
                <p>订单号:{{ orderNo }}</p>
                <p>创建时间:{{ item.createTime }}</p>

              </div>

            </div>

          </div>
          <!--          商品信息-->

          <div class="service-msg" v-if="item.username==to&&item.identity=='orderGoods'">
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
            <div style="flex: 3;">
              <div class="order-card">
                <div style="display: flex">
                  <div style="flex: 1"><img width="70px" :src="item.imgurl"></div>
                  <div style="flex: 1;">
                    <P style="color: black;font-size: 12px;overflow: hidden;height: 40px">{{ item.goodsName }}</P>
                    <P style="color: #FF6600;font-size: 16px">￥{{ item.price }}</P>
                  </div>
                </div>
                <p style="border-top: 1px solid #edeaea;color: #b0b0b0;line-height: 20px">旗舰店</p>
              </div>

            </div>

          </div>


          <div class="customer-msg" v-if="item.username==username">
            <div class="chatinfo-customer"><p>{{ item.msg }}</p></div>
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
          </div>
        </div>

      </div>
      <div class="customer-service-btoom">
        <el-row style="padding: 0px 10px">
          <el-col :span="18">

            <el-input v-model="msg" placeholder="我想问...." @change="put"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="icon">
              <img width="30px"
                   src="">
            </div>
            <div class="icon">
              <img width="30px"
                   src="">
            </div>

          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

const c = axios.create({
  baseURL: "http://10.22.112.205:8081/",
})
export default {
  name: "customerService",
  data() {
    return {
      username: "",
      to: "",
      msg: "",
      path: "ws://10.22.112.205:8081/webSocket/lmg",
      socket: "",

      msgList: [
        {
          name: "kf", msg: "请问有什么可以帮你"
        },
        {
          name: "kf", msg: "请问有什么可以帮你1"
        },
        {
          name: "lmg", msg: "介绍一下产品"
        },
        {
          name: "lmg", msg: "产品的优点"
        }

      ]
    }

  },
  mounted() {
    this.username = this.$route.query.serviceNo
    this.to= this.$route.query.userId
    this.initData()
    this.connectWebsocket()
  },
  destroyed() {
    this.socket.close()
  },
  methods: {
    scroller() {
      this.$nextTick(() => {
        this.$refs.service.scrollTop = this.$refs.service.scrollHeight;
      });

    },
    put(value) {
      this.msg = ""
      let msgBody = {
        username: this.username,
        to: this.to,
        identity: "service",
        msg: value,
      }
      console.log(value)
      this.msgList.data.push(msgBody)
      this.socket.send(JSON.stringify(msgBody))
      this.scroller()

    },
    initData() {
      c.post('/message', {
        username: this.username,
        to: this.to,
        identity: 'service',
        msg: "323"
      }).then((res) => {
        console.log(res)
        this.msgList = res
        this.scroller()
        console.log(this.msgList)
      })

    },
    connectWebsocket() {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.socket = new WebSocket('ws://10.22.112.205:8081/webSocket/' + this.username)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msgb) {
      // let msg = JSON.parse(msgb.data)
      if (msgb.data == 'keyorderGoods' || msgb.data == 'keyOrder') {
        console.log("dd")
        this.initData()
        return
      }
      console.log(msgb.data)
      let msgBody = {
        username: this.to,
        msg: msgb.data,
        identity: "client",
        to: this.username
      }
      this.msgList.data.push(msgBody)
      this.scroller()
    },
    send: function () {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    }

  }

}
</script>

<style scoped>
.customer-service {
  width: 400px;

  margin: 0 auto;
  height: 100%;
  background: #eeeeee;
}

.order-card {
  background: #ffffff;
  padding: 10px 20px;
  border-radius: 20px;
  width: 65%;
  float: left;
  /*display: flex;*/
  /*flex-direction: column;*/
}

.customer-service-body {
  height: 85%;
  overflow: scroll;
  overflow-x: hidden;
}

.customer-service-btoom {
  height: 15%;
}

.service-msg {
  display: flex;
  align-items: center;
  padding: 10px;
}

.customer-msg {
  display: flex;
  align-items: center;
  padding: 10px;
}

.icon-img {
  margin-left: 20px;
}

.chatinfo {
  flex: 4;

  min-height: 30px;
  padding: 5px;
}

.chatinfo-customer {
  flex: 4;
  min-height: 30px;
  padding: 5px;
}

.chatinfo-customer p {
  background: rgb(253, 224, 131);
  white-space: inherit;
  text-overflow: ellipsis;
  display: inline-block;
  padding: 5px 10px;
  float: right;
  line-height: 30px;
  border-radius: 10px;
  word-break: break-all;
}

.chatinfo p {
  background: #ffffff;
  white-space: inherit;
  text-overflow: ellipsis;
  display: inline-block;
  padding: 5px 10px;
  line-height: 30px;
  border-radius: 10px;
  word-break: break-all;

}

.icon {
  width: 50%;
  float: left;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
